
//建议使用已有VUE组件 vue 的懒加载
// VUE 图片懒加载

// npm i vue-lazyload -D

/**
 * 
 * 
VUE2

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'  //引入这个懒加载插件

Vue.use(VueLazyLoad, {
  preLoad: 1,
  error: require('./assets/img/error.jpg'),
  loading: require('./assets/img/homePage_top.jpg'),
  attempt: 2,
})



TODO 使用：
 <img v-lazy="item" alt=""> 

 */

//  VUE3.0
// src/components/index.js
// 默认图片地址
import defaultImg from '@/assets/images/001.jpg'

export default {
    install(app) {
        app.directive('lazyload', {
            mounted(el, bindings) {
                // el - dom元素，bindings - 指令的值
                const observer = new IntersectionObserver(([{
                    isIntersecting
                }]) => {
                    if (isIntersecting) {
                        observer.unobserve(el)
                        // 表示绑定的 dom 进入可视区域
                        el.src = bindings.value
                        // 图片加载出错时，显示默认图片
                        el.onerror = () => {
                            el.src = defaultImg
                        }
                    }
                }, {
                    threshold: 0
                })
                // 监视 dom
                observer.observe(el)
            }
        })
    }
}

// 如何使用？
/**
 // main.js

import { createApp } from 'vue'
import App from './App.vue'
import directUI from '@/components/index.js'

createApp(App).use(directUI).mount('#app')


// 组件中

<template>
    <img v-lazyload alt="" />
</template>

 */